<template>
	<view>
		<view class="content_bg">
			<view class="medical_img">
			<image style="width: 100%;height: 100%;" :src="drugData.image"></image>
			</view>
			<view class="medical_info">
				<view>
					<view class="main_info">{{drugData.name?drugData.name:""}}</view>
					<view class="main_info">{{drugData.useSpecifications?drugData.useSpecifications:""}}</view>
				</view>
				<view>
					<text class="price">￥{{drugData.price?drugData.price:""}}</text>
				</view>
			</view>
		</view>
		
		<view class="content_bg" style="margin-top: 20rpx;padding-bottom: 150rpx;">
			<view>
				<view class="medical_title">药品详情</view>
			</view>
			<view v-if="drugData.name">
				<view class="drugname">【 药品名 】</view>
				<view class="medical_data">{{drugData.name}}</view>
			</view>
			<view v-if="drugData.productName">
				<view class="drugname">【 通用名 】</view>
				<view class="medical_data">{{drugData.productName}}</view>
			</view>
			<view v-if="drugData.useSpecifications">
				<view class="drugname">【 规格 】</view>
				<view class="medical_data">{{drugData.useSpecifications}}</view>
			</view>
			<view v-if="drugData.dosageForm">
				<view class="drugname">【 剂型 】</view>
				<view class="medical_data">{{drugData.dosageForm}}</view>
			</view>
			<view v-if="drugData.applicableSymptoms">
				<view class="drugname">【 适应症状 】</view>
				<view class="medical_data">{{drugData.applicableSymptoms}}</view>
			</view>
			<view v-if="drugData.contraindications">
				<view class="drugname">【 禁忌 】</view>
				<view class="medical_data">{{drugData.contraindications}}</view>
			</view>
			<view v-if="drugData.precautions">
				<view class="drugname">【 注意事项 】</view>
				<view class="medical_data">{{drugData.precautions}}</view>
			</view>
			<view v-if="drugData.manufacturer">
				<view class="drugname">【 生产企业 】</view>
				<view class="medical_data">{{drugData.manufacturer}}</view>
			</view>
			<view v-if="drugData.approvalNumber">
				<view class="drugname">【 批准文号 】</view>
				<view class="medical_data">{{drugData.approvalNumber}}</view>
			</view>
			<view v-if="drugData.validPeriod">
				<view class="drugname">【 有效期(月) 】</view>
				<view class="medical_data">{{drugData.validPeriod}}</view>
			</view>
			<view v-if="drugData.useUnit">
				<view class="drugname">【 基本剂量单位 】</view>
				<view class="medical_data">{{drugData.useUnit}}</view>
			</view>
			<view v-if="drugData.usageInfo||drugData.dosageInfor">
				<view class="drugname">【 用法用量 】</view>
				<view class="medical_data">{{drugData.usageInfo?drugData.usageInfo+',':""}}{{drugData.dosageInfor?drugData.dosageInfor:""}}</view>
			</view>
			<view v-if="drugData.prescriptionClassification">
				<view class="drugname">【 处方类型 】</view>
				<view class="medical_data">{{drugData.prescriptionClassification}}</view>
			</view>
			<view v-if="drugData.adverseReactions">
				<view class="drugname">【 不良反应 】</view>
				<view class="medical_data">{{drugData.adverseReactions}}</view>
			</view>
			<view v-if="drugData.instructions">
				<view class="drugname">【 用药说明 】</view>
				<view class="medical_data">{{drugData.instructions}}</view>
			</view>
			<view v-if="drugData.defaultFrequency">
				<view class="drugname">【 使用频次 】</view>
				<view class="medical_data">{{drugData.defaultFrequency?drugData.defaultFrequency:""}}</view>
			</view>	
			
		</view>
		<!-- <view class="example-body bottom-car">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view> -->
	</view>
</template>

<script>
	import {drugInfo} from '@/api/prescribing.js';
	export default {
		data(){
			return{
				medicalid:"",
				drugData:{},
				options: [{
					icon: 'headphones',
					text: '客服'
				},{
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				]
			}
			},
		onLoad: function(option) {
			this.medicalid=option.items;
			this.drugInfo();
		},
		methods:{
			drugInfo(){
				let _this = this
				uni.showLoading({
					title:'加载中'
				})
				drugInfo(
					_this.medicalid
				).then(res => {
					_this.drugData=res.data;
					uni.hideLoading()
				}).catch(res => {
					uni.hideLoading()
				});
			},
			onClick(e) {
				if(e.content.text=="客服"){
					uni.navigateTo({
						url:`/pagesSub-My/my/customerService`
					})
				}
			},
			buttonClick(e) {
				console.log(e)
				this.options[1].info++
			}
		}
		}
</script>

<style scoped>
	page{
		background-color: #FFFFFF;
	}
	.medical_img{
		width: 100%;
		height: 400rpx;
		margin-top: 30rpx;
	}
	.medical_info{
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.price{
		font-size: 40rpx;
		color:#EB534C;
	}
	.medical_title{
		font-size: 36rpx;
		text-align: center;
		font-weight: bold;
		margin-top: 50rpx;
	}
	.drugname{
		font-weight: bold;
		font-size: 30rpx;
	}
	.medical_data{
		margin: 20rpx 0;
		font-size: 30rpx;
		color:#808080;
	}
	.main_info{
		margin-bottom: 5rpx;
	}
	.content_bg{
		background-color: #FFFFFF;
		padding:20rpx 30rpx;
	}
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	
	/* #endif */
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	view {
		font-size: 14px;
		line-height: inherit;
	}
	
	.example {
		padding: 0 15px 15px;
	}
	
	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	
	/* #endif */
	.example {
		padding: 0 15px;
	}
	
	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}
	
	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}
	
	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}
	
	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}
	
	.word-btn--hover {
		background-color: #4ca2ff;
	}
	
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
	
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	.bottom-car{
		background-color: #FFFFFF;
		position:fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing:content-box;
	}
</style>
